<template>
  <div>
    <van-nav-bar  :title="activityObj.activeTitle" left-arrow @click-left="$router.go(-1)" />
     <div class="activityList">
       <div class="activ-bg">
        <img :src="activityObj.activeImg" alt="">

        <div class="activ-box activ">
          <div class="title">{{activityObj.activeTitle}}</div>
          <p >活动开始时间：<label >{{activityObj.startTime}}</label></p>
          <p >活动结束时间：<label >{{activityObj.endTime}}</label></p>
          <p >活动地址：<label >{{activityObj.activeAddress}}</label></p>
          <p >活动状态：<label :class="{'prompt':activityObj.activeStatus == '1','over':activityObj.activeStatus == '3','hot':activityObj.activeStatus == '2'}">{{activityObj.activeState}}</label></p>
          <p >活动可获得积分：<label >{{activityObj.activeScore}}积分</label></p>
        </div>
        <div class="activ-boxs activs" v-if="activityObj.content != ''">
          <div>
            <p v-html="activityObj.content"></p>
          </div>
        </div>
       </div>
      <!-- 按钮 -->
      <div class="activ-btn" v-if="activityObj.isEnjoy == 1 && activityObj.activeStatus == '2'">
        <button class="btn" @click="getBtn">我要参加</button>
      </div>
      <div class="activ-btn" v-else-if="activityObj.isEnjoy == 2 && activityObj.activeStatus == '2'">
        <button class="btn huise">已参加</button>
      </div>
      <div class="activ-btn" v-else-if="activityObj.isEnjoy == 2 && activityObj.activeStatus == '1'">
        <button class="btn huise">已参加</button>
      </div>
      <div class="activ-btn" v-else-if="activityObj.isEnjoy == 1 && activityObj.activeStatus == '1'">
        <button class="btn" @click="getBtn">我要参加</button>
      </div>
      <div class="activ-btn" v-else-if="activityObj.isEnjoy == 2 && activityObj.activeStatus == '3'">
        <button class="btn huise">已参加</button>
      </div>
     </div>
  </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant';
export default {
  data(){
    return{
        id:this.$route.query.id ? this.$route.query.id : '',   // 判断页面是否存在id
        disabled: true,
        activityObj:{}
      }
    },
    methods:{
      getActById(){  //  调取页面详情接口
        let params ={
          userId:sessionStorage.getItem('userId'),
          actId:this.id
        }
        apiHttp.activityDeat.getActById(params,resp=>{
          if(resp.resultCode == '000000'){
          if(resp.data.act.activeStatus == 1){
            this.disabled = false
          }else if(resp.data.act.activeStatus == 2){
            this.disabled = true
          }else{
            this.disabled = false
          }
          this.activityObj = resp.data.act
          this.activeImg= resp.data.act.activeImg
          }else{
            Toast(resp.resultMsg)
          }
        })
      },
      getBtn(){  //  点击去参加按钮
        let params = {
          userId:sessionStorage.getItem('userId'),
          actId:this.id
        }
        apiHttp.activityDeat.applyAct(params,resp=>{
          if(resp.resultCode == "000000"){
            Toast('参加成功')
            this.getActById();
          }else{
            Toast(resp.resultMsg)
          }
        })
      },
    },
     mounted: function(){
      this.getActById();// 获取--详情
    },
  }
</script>
<style scoped>
  .activ-bg{
    height: 10rem;
    position: relative
  }
  .activ-box,.activ-boxs{
    width: 92%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -1rem;
    padding: 0.3rem;
    background-color: #ffffff;
    box-shadow: 0px 0px 12px 0px rgba(86, 31, 34, 0.3);
    border-radius: 4px;
  }
  .activ-box,.activ-boxs{
    position: relative;
  }
  .activ-box::after{
    position: absolute;
    left: 0.3rem;
    top: 0.5rem;
    content: '';
    width: 1rem;
    border-top: 4px solid #D33043;
  }
  .title{
    margin-top:1rem;
    font-size: 0.65rem;
    font-weight: 600;
  }
  .activ-box p,.activ-boxs p{
    line-height: 1.2rem;
    color: #323233;
    font-size:0.6rem;
  }
  .activ-box p label{
    color: #999999;
  }
  .activs{
    top:0;
    margin-bottom: 3rem;
  }
  /* 按钮 */
  .activ-btn{
     position: fixed;
    bottom: 0rem;
    width: 100%;
    background-color: #ffffff;
   text-align: center;
   padding: 0.2rem;
    
  }
  .btn{
    border: none;
    width: 90%;
    line-height: 1.8rem;
    border-radius:6px;
    background-color: #D33043;
    color: #FFFFFF;
    font-size: 0.8rem;
  }
  .btnBan{
    border: none;
    width: 90%;
    line-height: 1.8rem;
    border-radius:6px;
    background-color: #999999;
    color: #FFFFFF;
    font-size: 0.8rem;
  }
  .huise{
    background-color: #ccc;
  }
  /* 进行中 */
  .prompt{color: #27C86B!important;}
  /* 已结束 */
  .over{color: #FF9C00!important;}
  /* 火热报名 */
   .hot{color: #D33043!important;}
</style>